<template>
  <div class="operate-tools" :class="{ 'operate-position': isLeft }">
    <div class="left">
      <div class="position-change" @click="changePosition">
        <span
          class="icon position-icon"
          :class="{ 'right-position': !isLeft }"
        ></span>
        <span>{{ isLeft ? '靠右' : '靠左' }}</span>
      </div>
    </div>
    <div class="right" :class="{ 'right-change': isLeft }">
      <div class="right-part">
        <template v-if="commentStore.currentQuestion.question_id">
          <div
            class="item"
            @click="showAnswer"
            :class="{ active: isShowAnswer }"
          >
            <span class="desc">{{
              isShowAnswer ? '收起答案' : '答案解析'
            }}</span>
          </div>
          <template v-if="!commentStore.similar.isShow">
            <div
              class="item"
              @click="showDetail"
              :class="{ active: isShowDetail }"
            >
              <span class="desc"> 作答详情</span>
            </div>
            <div
              class="item"
              @click="showSimilar"
              :class="{ active: isShowSimilar }"
            >
              <span class="desc"> 相似题</span>
            </div>
          </template>
          <div
            class="item"
            @click="showOriginQuestion"
            v-if="commentStore.similar.isShow"
            :class="{ active: commentStore.similar.isShow }"
          >
            <span class="desc">查看原题</span>
          </div>
        </template>
        <div
          class="item"
          @click="goHalfScreen"
          :class="{ active: isHalfScreen }"
        >
          <span class="icon half-screen"></span>
          <span class="desc">降半屏</span>
        </div>
        <!-- <div class="item" @click="setting" :class="{ active: isSetting }">
          <span class="icon setting"></span>
          <span class="desc">设置</span>
        </div> -->
      </div>
      <div class="item exit-item" @click="exit" :class="{ active: isExit }">
        <span class="icon exit"></span>
        <span class="desc">退出</span>
      </div>
    </div>
  </div>
  <div ref="settingRef" class="setting-dialog">
    <a-modal
      :visible="isSetting"
      centered
      width="480px"
      :footer="null"
      title="设置"
      :maskClosable="true"
      :getContainer="() => settingRef"
      @cancel="isSetting = false"
    >
      隐藏典型学生姓名&nbsp;
      <a-switch v-model:checked="isHide" @change="changeHide"></a-switch>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useComment } from '@/stores/comment'
import $bus from '@/utils/tools/bus'
const commentStore = useComment()
const isSetting = ref(false)
const isExit = ref(false)
const isHalfScreen = ref(false)
const isHide = ref(false)
const settingRef = ref(null)
const isShowAnswer = ref(false)
const isShowDetail = ref(false)
const isShowSimilar = ref(false)
const isLeft = ref(false)
const showAnswer = () => {
  isShowAnswer.value = !isShowAnswer.value
  emits('change-answer', isShowAnswer.value)
}

const showDetail = () => {
  isShowDetail.value = !isShowDetail.value
  emits('change-response', isShowDetail.value)
}

const showSimilar = () => {
  isShowSimilar.value = !isShowSimilar.value
  emits('show-similar', isShowSimilar.value)
}

const emits = defineEmits([
  'half-screen',
  'change-answer',
  'change-response',
  'show-similar'
])

const changeHide = val => {
  isHide.value = val
  commentStore.setShowTypical(isHide.value)
}

const goHalfScreen = () => {
  isHalfScreen.value = !isHalfScreen.value
  emits('half-screen', isHalfScreen.value)
}

const setting = () => {
  isSetting.value = !isSetting.value
}

const exit = () => {
  isExit.value = !isExit.value
  commentStore.resetData()
  window.close()
}

const showOriginQuestion = () => {
  commentStore.setSimilar({
    isShow: false,
    list: []
  })
  $bus.emit('reset-similar')
}

const changePosition = () => {
  isLeft.value = !isLeft.value
  sessionStorage.setItem('is-left', JSON.stringify(isLeft.value))
  $bus.emit('change-position')
}

onMounted(() => {
  const flag = sessionStorage.getItem('is-left')
  isLeft.value = flag ? JSON.parse(flag) : false
  isHide.value = commentStore.isShowTypical
})

defineExpose({
  goHalfScreen,
  isShowDetail,
  isShowSimilar
})
</script>
<style lang="less" scoped>
.operate-tools {
  z-index: 999;
  position: fixed;
  bottom: 0;
  right: 0;
  background: #000;
  height: 56px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  &.operate-position {
    flex-direction: row-reverse;
  }

  .left {
    .position-change {
      * {
        color: #fff;
      }
      border-radius: 8px;
      border: solid 1px #fff;
      cursor: pointer;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      margin: 0 16px;
      gap: 4px;

      .icon {
        width: 24px;
        height: 24px;
      }
      .position-icon {
        background: url('@/assets/images/comment/position-right.png') no-repeat
          center/cover;

        &.right-position {
          background: url('@/assets/images/comment/position-left.png') no-repeat
            center/cover;
        }
      }

      &:hover {
        background: #fff;
        * {
          color: black;
        }
        .position-icon {
          background: url('@/assets/images/comment/position-right-hover.png')
            no-repeat center/cover;

          &.right-position {
            background: url('@/assets/images/comment/position-left-hover.png')
              no-repeat center/cover;
          }
        }
      }
    }
  }

  .right {
    display: flex;
    flex-direction: row;
    gap: 4px;
    width: fit-content;

    &.right-change {
      flex-direction: row-reverse;
    }

    .right-part {
      display: flex;
      flex-direction: row;
      gap: 4px;
    }

    .item {
      border-radius: 8px;
      border: solid 1px #fff;
      cursor: pointer;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      .icon {
        width: 24px;
        height: 24px;
      }

      .half-screen {
        background: url('@/assets/images/comment/half-screen-hover.png')
          no-repeat center/cover;
      }

      .setting {
        background: url('@/assets/images/comment/setting-hover.png') no-repeat
          center/cover;
      }
      .exit {
        background: url('@/assets/images/comment/exit.png') no-repeat
          center/cover;
      }

      .desc {
        color: #fff;
      }

      &:hover {
        background: rgba(0, 189, 141, 1);
        border-radius: 8px;
        border: 1px solid rgba(0, 189, 141, 1);
      }

      &.exit-item {
        border: 1px solid rgba(255, 90, 80, 1);
        .desc {
          color: rgba(255, 90, 80, 1);
        }

        &:hover {
          .exit {
            background: url('@/assets/images/comment/exit-hover.png') no-repeat
              center/cover;
          }
          background: rgba(255, 90, 80, 1);
          border-radius: 8px;
          border: 1px solid rgba(255, 90, 80, 1);

          .desc {
            color: #fff;
          }
        }
      }
    }

    .active {
      border-radius: 8px;
      background: rgba(0, 189, 141, 1);
      border: 1px solid rgba(0, 189, 141, 1);
    }
  }
}

.setting-dialog {
  :deep(.ant-modal-content) {
    border-radius: 16px;
    padding: 0 24px 24px 24px;

    .ant-modal-header {
      padding: 24px 0;
      border-radius: 16px;
      border: none;
    }

    .ant-modal-body {
      padding: 0;
    }
  }
}
</style>
